<div class="widget" [ngClass]="{'double-height': true,'xs': screenType == 'Mobile', 'generic-hardware': !product_image, 'ix-hardware': product_image}" >
  <div class="card-container front">
    <mat-card class="front" fxLayout="row" fxLayoutWrap fxLayoutAlign="space-between stretch">
      <mat-card-content fxLayout="row wrap" fxLayout.gt-xs="row wrap" fxLayoutAlign="space-between start" fxFlex="100">

        <mat-toolbar-row fxHide.xs class="view-overview">
          <span fxHide.xs class="mat-card-title-text">
            <span class="card-title-text">
              &nbsp;{{"System Information" | translate}}&nbsp;<span *ngIf="isPassive" class="passive">({{"Standby" | translate}})</span>
            </span>
          </span>
        </mat-toolbar-row>

        <div class="carousel">
          <div class="slide overview" fxFlex="100" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between">

          <!-- Summary Section -->
          <div fxFlex.xs="250px" fxFlex="40" 
            [ngClass]="{'fn-theme-contrast-lighter': themeService.activeTheme == themeService.defaultTheme , 'fn-theme-primary': themeService.activeTheme != themeService.defaultTheme}" 
            class="left {{isPassive ? 'passive' : 'active'}}" 
            fxLayout="column" fxLayoutAlign="space-between center">

            <!-- Mobile Only: Exit Widget -->
            <button fxHide.gt-xs class="mat-card-title-text primary-nav" mat-icon-button color="default" >
              <mat-icon (click)="goBack()" class="back-arrow">chevron_left</mat-icon>
            </button>

            <div class="platform-logo-wrapper" fxFlex="20">
                <ng-container *ngIf="product_image || isPassive; else textOnly">
                  <mat-icon *ngIf="retroLogo == 1" svgIcon="freenas_logo_full" class="retro" id="{{product_model}}"></mat-icon>
                  <mat-icon *ngIf="retroLogo == 0 && product_type == 'CORE'" svgIcon="truenas_core_logo_full" id="{{product_model}}"></mat-icon>
                  <mat-icon *ngIf="retroLogo == 0 && product_type == 'ENTERPRISE'" svgIcon="truenas_enterprise_logo_full" id="{{product_model}}"></mat-icon>
                  <mat-icon *ngIf="retroLogo == 0 && product_type == 'SCALE' || product_type == 'SCALE_ENTERPRISE'" svgIcon="truenas_scale_logo_full" id="{{product_model}}"></mat-icon>
                </ng-container>

                <ng-template #textOnly>
                  <mat-icon *ngIf="retroLogo == 1" svgIcon="freenas_logotype" class="retro" id="{{product_model}}"></mat-icon>
                  <mat-icon *ngIf="retroLogo == 0 && product_type == 'CORE'" svgIcon="truenas_core_logotype" id="{{product_model}}"></mat-icon>
                  <mat-icon *ngIf="retroLogo == 0 && product_type == 'ENTERPRISE'" svgIcon="truenas_enterprise_logotype" id="{{product_model}}"></mat-icon>
                  <mat-icon *ngIf="retroLogo == 0 && product_type == 'SCALE' || product_type == 'SCALE_ENTERPRISE'" svgIcon="truenas_scale_logotype" id="{{product_model}}"></mat-icon>
                </ng-template>
            </div>

            <div class="content-left" [fxFlex.xs]="product_type === 'ENTERPRISE' && product_image == 'X10'? 80 : 60" fxFlex.gt-xs="60"  fxLayout="column" fxLayoutAlign="center center">

              <div class="product-image {{product_type === 'ENTERPRISE' ? 'truenas' : 'freenas'}} {{product_image == 'ix-original.svg' ? 'ix-logo' : ''}}">
                <img *ngIf="product_image; else generic" [src]="'assets/images/' + product_image" id="{{product_model}}">
                  <ng-template #generic>
                    <!--<mat-icon *ngIf="product_type === 'CORE' && !certified" class="generic" svgIcon="freenas_logomark"></mat-icon>-->
                    <mat-icon *ngIf="retroLogo == 1 && !isPassive" class="generic" svgIcon="freenas_logomark"></mat-icon>
                    <mat-icon *ngIf="product_type === 'CORE' && !certified && retroLogo == 0" class="generic" svgIcon="truenas_core_logomark"></mat-icon>
                    <mat-icon *ngIf="product_type === 'CORE' && certified && retroLogo == 0" class="generic certified" svgIcon="freenas_certified"></mat-icon>
                    <mat-icon *ngIf="ready && !isPassive && product_type === 'ENTERPRISE' && !certified && retroLogo == 0" class="generic" svgIcon="truenas_enterprise_logomark"></mat-icon>
                    <mat-icon *ngIf="product_type === 'SCALE' || product_type == 'SCALE_ENTERPRISE' && !certified && retroLogo == 0" class="generic" svgIcon="truenas_scale_logomark"></mat-icon>
                  </ng-template>
                  <div class="generic alert" *ngIf="!product_image && isPassive && ha_status !== 'HA Enabled'">
                    <mat-icon role="img" fontSet="mdi-set" fontIcon="mdi-alert"></mat-icon>
                  </div>
                  <div *ngIf="product_image && isHA" class="ha-node-status">({{ isPassive ? "Standby" : "Active" | translate }})</div>
                  <div *ngIf="ready && !product_image && product_type == 'ENTERPRISE' " class="ha-node-status">(Unsupported Hardware)</div>
              </div>
            </div>

            <div *ngIf="isUpdateRunning; else noUpdateRunning">
                <p id="update-in-progress" class="">{{'UPDATE IN PROGRESS' | translate}}</p>
            </div>

            <ng-template #noUpdateRunning>
              <div fxHide.xs fxFlex="18" class="update-action">
                <button *ngIf="!isPassive" class="" mat-button color="{{updateBtnStatus}}" (click)="router.navigate(['system','update'])"
                  ix-auto ix-auto-type="button" ix-auto-identifier="{{updateBtnLabel | uppercase}}">{{updateBtnLabel | translate}}</button>
                <simple-failover-button *ngIf="isPassive" [disabled]="!ha_status || ha_status !== 'HA Enabled'" ></simple-failover-button>
              </div>
            </ng-template>
          </div>

          <!-- Details Section -->
          <div class="right" fxFlex.xs fxFlex.gt-xs="60" fxLayout="column">

            <div  fxFlex *ngIf="!data && isHA && isPassive && !ha_status" class="data-container ha-status">
              <div class="spinner-wrapper"><mat-spinner [diameter]="40" style="margin: 0 auto;"></mat-spinner></div>
            </div>

            <div  fxFlex *ngIf="!data && isHA && isPassive && ha_status && ha_status !== 'HA Enabled'" class="data-container ha-status">
              <h3>{{ha_status}}</h3>
            </div>

            <div  fxFlex *ngIf="data" class="data-container">
              <div fxHide.gt-xs class="list-subheader">{{isPassive ? 'System Information (Standby)' : 'System Information'}}</div>
              <div fxHide.xs class="list-subheader">{{'Overview' | translate}}</div>

              <mat-list>
                <mat-list-item><strong>{{'Platform' | translate}}:</strong> &nbsp;&nbsp;{{data.system_product && manufacturer == 'ixsystems' ? data.system_product : 'Generic'}}</mat-list-item>
                <mat-list-item>
                  <strong>{{"Version" | translate}}:</strong> 
                  &nbsp;&nbsp;
                  <div>
                    <span textLimiter 
                      [popup]="false" 
                      threshold="28">
                      {{data.version}}
                    </span>
                    <copy-btn [text]="data.version"></copy-btn>
                  </div>
                </mat-list-item>

                <mat-list-item *ngIf="data.license">
                  <strong>{{'License' | translate}}:</strong> &nbsp;&nbsp;
                  <span style="text-transform:capitalize">{{data.license.contract_type.toLowerCase()}}</span> &nbsp;contract, &nbsp;
                  expires {{data.license.contract_end.$value}}
                </mat-list-item>

                <mat-list-item  *ngIf="data.system_serial && manufacturer == 'ixsystems' ">
                  <span><strong>{{"Serial Number" | translate}}:</strong>&nbsp;&nbsp;{{ data.system_serial}}</span>
                </mat-list-item>

                <mat-list-item><strong>{{"HostName" | translate}}:</strong> &nbsp;&nbsp;{{data.hostname}}</mat-list-item>
                <mat-list-item *ngIf="uptimeString"><strong>{{"Uptime" | translate}}:</strong> &nbsp;&nbsp;{{uptimeString}} as of {{ dateTime }}                </mat-list-item>

              </mat-list>

              <div fxHide.gt-xs class="mobile-update-action update-action" *ngIf="ready">
                <button *ngIf="!isPassive" class="" mat-button color="primary" (click)="router.navigate(['system','update'])"
                  ix-auto ix-auto-type="button" ix-auto-identifier="{{updateBtnLabel | uppercase}}">{{updateBtnLabel | translate}}</button>
                <simple-failover-button color="primary" *ngIf="isPassive"></simple-failover-button>
              </div>

            </div> <!-- END datacontainer -->

          </div> <!-- End right -->

          </div> <!-- end slide -->
        </div> <!-- end carousel -->
      </mat-card-content>
    </mat-card>

    <!-- Flip Side -->
    <mat-card class="back">
      <mat-card-content>
        <h3>Form goes here</h3>
      </mat-card-content>
      <div class="widget-footer"><button mat-button color="primary" (click)="toggleConfig()"
          ix-auto ix-auto-type="button" ix-auto-identifier="FLIP">{{"Flip" | translate}}</button></div>
    </mat-card>
  </div>
</div>
